<template>
    <div class="device-data">
        <!-- 筛选项 -->
        <div class="screening">
            <el-row class="device-data_row device-data_row--filter" type="flex">
                <el-select class="filter-item" clearable filterable @change="screeningChange"
                           v-model="paramsDft.apptype"
                           placeholder="品类">
                    <el-option
                            v-for="{ value, label } in categorySelect"
                            :key="value"
                            :label="label"
                            :value="value">
                    </el-option>
                </el-select>
                <el-select class="filter-item" clearable filterable @change="screeningChange"
                           v-model="paramsDft.model_type" placeholder="型号">
                    <el-option
                            v-for="item in sN8List"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <el-select class="filter-item" @change="_provinceChange" clearable filterable
                           v-model="paramsDft.province_name"
                           placeholder="省">
                    <el-option
                            v-for="item in provinceList"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <el-select class="filter-item" clearable filterable @change="screeningChange"
                           v-model="paramsDft.city_name" placeholder="市">
                    <el-option
                            v-for="item in cityListByProvince"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-row>
            <el-row class="device-data_row device-data_row--filter">
                <el-radio-group @change="timeRadioChange" v-model="paramsDft.timeType">
                    <el-radio label="1" border>当天</el-radio>
                    <el-radio label="2" border>近7天</el-radio>
                    <el-radio label="3" border>近30天</el-radio>
                    <el-radio label="4" border>自定义</el-radio>
                </el-radio-group>
                <el-date-picker
                        style="margin-left: 15px"
                        v-if="paramsDft.timeType == '4'"
                        class="filter-item"
                        v-model="paramsDft.dateRange"
                        type="daterange"
                        @change="dataPickerChange"
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-row>
        </div>
        <!-- 最热统计  -->
        <div class="" >
            <el-row>
                <el-col :span="24" v-loading="modeLoading.hotStatisticsCount">
                    <ConetntAnalysisTable pageName="最热统计" :tableList="tableListDataMap.hotStatisticsCount"
                                          :tableColumnList="tableColumnListMap.hotStatisticsCount"></ConetntAnalysisTable>
                </el-col>
            </el-row>

        </div>
        <!-- 关键词搜索统计/菜谱收藏统计  -->
        <div>
            <el-row style="width: calc(100% + 20px);" :gutter="20">
                <el-col :span="12" v-loading="modeLoading.searchKeyWordCount">
                    <ConetntAnalysisTable pageName="关键词搜索统计" :tableList="tableListDataMap.searchKeyWordCount"
                                          :tableColumnList="tableColumnListMap.searchKeyWordCount"></ConetntAnalysisTable>
                </el-col>
                <el-col :span="12" v-loading="modeLoading.favoriteMenuCount">
                    <ConetntAnalysisTable pageName="菜谱收藏统计" :tableList="tableListDataMap.favoriteMenuCount"
                                          :tableColumnList="tableColumnListMap.favoriteMenuCount"></ConetntAnalysisTable>
                </el-col>
            </el-row>
        </div>
        <!-- 最热菜谱统计/分享菜谱统计  -->
        <div>
            <el-row style="width: calc(100% + 20px);" :gutter="20">
                <el-col :span="12" v-loading="modeLoading.hotMenuCount">
                    <ConetntAnalysisTable pageName="最热菜谱统计" :tableList="tableListDataMap.hotMenuCount"
                                          :tableColumnList="tableColumnListMap.hotMenuCount"></ConetntAnalysisTable>
                </el-col>
                <el-col :span="12">
                    <ConetntAnalysisTable pageName="分享菜谱统计" :tableList="tableListDataMap.getShareMenuCount"
                                          :tableColumnList="tableColumnListMap.getShareMenuCount"
                    ></ConetntAnalysisTable>
                </el-col>
            </el-row>
        </div>
        <!-- 菜谱评分统计/晒图菜谱统计  -->
        <div>
            <el-row style="width: calc(100% + 20px);" :gutter="20">
                <el-col :span="12" v-loading="modeLoading.menuScoreCount">
                    <ConetntAnalysisTable pageName="菜谱评分统计" :tableList="tableListDataMap.menuScoreCount"
                                          :tableColumnList="tableColumnListMap.menuScoreCount"></ConetntAnalysisTable>
                </el-col>
                <el-col :span="12" v-loading="modeLoading.showMenuCount">
                    <ConetntAnalysisTable pageName="晒图菜谱统计" :tableList="tableListDataMap.showMenuCount"
                                          :tableColumnList="tableColumnListMap.showMenuCount"></ConetntAnalysisTable>
                </el-col>
            </el-row>
        </div>
        <!-- 烹饪过菜谱统计/使用过模式  -->
        <div>
            <el-row style="width: calc(100% + 20px);" :gutter="20">
                <el-col :span="12" v-loading="modeLoading.cookMenuCount">
                    <ConetntAnalysisTable pageName="烹饪过菜谱统计" :tableList="tableListDataMap.cookMenuCount"
                                          :tableColumnList="tableColumnListMap.cookMenuCount"></ConetntAnalysisTable>
                </el-col>
                <el-col :span="12" v-loading="modeLoading.usedModeCount">
                    <ConetntAnalysisTable pageName="使用过模式" :tableList="tableListDataMap.usedModeCount"
                                          :tableColumnList="tableColumnListMap.usedModeCount"></ConetntAnalysisTable>
                </el-col>
            </el-row>
        </div>

    </div>

</template>

<script>
import commonMixin from '@/mixins/common'
import { categorySelect } from '@/utils/consts'
import ConetntAnalysisTable from './content-analysis-table'
import TimeSelect from './component/timeSelect'
import moment from 'moment'

export default {
  components: {
    ConetntAnalysisTable,
    TimeSelect
  },
  mixins: [commonMixin],
  created () {
  },
  data () {
    return {
      sN8model_type: '',
      categoryValue: '',
      categorySelect: categorySelect, // 品类
      provinceList: [],
      cityListByProvince: [],
      sN8List: [],
      timeSelectMap: {

      },
      paramsDft: {
        timeType: '2',
        dateRange: '',
        model_type: '', // 型号
        province_name: '', // 省份
        city_name: '', // 城市
        apptype: '', // 品类
        sn8: '', // sn8
        start_day: moment().add('-7', 'days').format('YYYY-MM-DD'), // 开始日期
        end_day: moment(new Date()).format('YYYY-MM-DD')// 结束日期
      },
      tableColumnListMap: {
        showMenuCount: [{ name: '晒图菜谱', key: 'menu' }, { name: '次数', key: 'selectionTimes' }], // 晒图菜谱统计
        menuScoreCount: [{ name: '菜谱评分', key: 'menu' }, { name: '次数', key: 'avgScore' }], // 菜谱评分统计
        favoriteMenuCount: [{ name: '菜谱收藏', key: 'menu' }, { name: '次数', key: 'selectionTimes' }], // 菜谱收藏统计
        cookMenuCount: [{ name: '烹饪过菜谱', key: 'menu' }, { name: '烹饪次数', key: 'selectionTimes' }], // 烹饪过菜谱统计
        searchKeyWordCount: [{ name: '搜索关键词', key: 'keyword' }, { name: '搜索次数', key: 'selectionTimes' }], // 关键词搜索统计
        usedModeCount: [{ name: '使用过模式', key: 'mode' }, { name: '使用次数', key: 'selectionTimes' }], // 使用过模式统计
        hotMenuCount: [{ name: '热门菜谱', key: 'menu' }, { name: '浏览量', key: 'selectionTimes' }], // 最热菜谱统计
        hotStatisticsCount: [{ name: '热门', key: 'hot' }, { name: '名称', key: 'name' }, { name: '次数', key: 'selectionTimes' }], // 最热统计
        getShareMenuCount: [{ name: '分享菜谱', key: 'menu' }, { name: '次数', key: 'menu_share' }]// 分享菜谱
      },
      tableListDataMap: {
        showMenuCount: [], // 晒图菜谱统计
        menuScoreCount: [], // 菜谱评分统计
        favoriteMenuCount: [], // 菜谱收藏统计
        cookMenuCount: [], // 烹饪过菜谱统计
        searchKeyWordCount: [], // 关键词搜索统计
        usedModeCount: [], // 使用过模式统计
        hotMenuCount: [], // 最热菜谱统计
        hotStatisticsCount: [], // 最热统计
        getShareMenuCount: []// 分享菜单
      },
      modeLoading: {
        showMenuCount: false, // 晒图菜谱统计
        menuScoreCount: false, // 菜谱评分统计
        favoriteMenuCount: false, // 菜谱收藏统计
        cookMenuCount: false, // 烹饪过菜谱统计
        searchKeyWordCount: false, // 关键词搜索统计
        usedModeCount: false, // 使用过模式统计
        hotMenuCount: false, // 最热菜谱统计
        hotStatisticsCount: false, // 最热统计
        getShareMenuCount: false// 分享菜单
      }

    }
  },
  mounted () {
    // 获取省份
    this._getProvinceList()
    // 获取sn8
    this._getSN8List()
    // 初始化页面
    this._initPage()
  },
  methods: {
    /**
             * 初始化页面
             * @returns {Promise<void>}
             * @private
             */
    _initPage () {
      // 最热统计
      this._getHotStatisticsCount()
      // 关键词搜索统计
      this._getSearchKeyWordCount()
      // 菜谱收藏统计
      this._getFavoriteMenuCount()
      // 最热菜谱统计(菜谱浏览量)
      this._getHotMenuCount()
      // 菜谱评分统计
      this._getMenuScoreCount()
      // 晒图菜谱统计
      this._getShowMenuCount()
      // 烹饪过菜谱统计
      this._getCookMenuCount()
      // 使用过模式
      this._getUsedModeCount()
      // 分享菜谱统计
      this._getShareMenuCountGET()
    },
    paramsFilter (paramsArr) {
      let params = {}
      this._.each(paramsArr, (item) => {
        if (this.paramsDft[item]) {
          params[item] = this.paramsDft[item]
        }
      })
      return params
    },
    /**
             * 筛选项更改
             * @returns {Promise<void>}
             * @private
             */
    screeningChange () {
      this._initPage()
    },
    /**
             * 时间单选项
             * @returns {Promise<void>}
             * @private
             */
    timeRadioChange () {
      let timeMap = {
        // 当日
        'time-1': {
          start_day: moment(new Date()).format('YYYY-MM-DD'),
          end_day: moment(new Date()).format('YYYY-MM-DD')
        },
        // 近7天
        'time-2': {
          start_day: moment().add('-7', 'days').format('YYYY-MM-DD'),
          end_day: moment(new Date()).format('YYYY-MM-DD')
        },
        // 近30天
        'time-3': {
          start_day: moment().add('-30', 'days').format('YYYY-MM-DD'),
          end_day: moment(new Date()).format('YYYY-MM-DD')
        }
      }
      this.paramsDft.start_day = timeMap['time-' + this.paramsDft.timeType].start_day
      this.paramsDft.end_day = timeMap['time-' + this.paramsDft.timeType].end_day
      this.screeningChange()
    },
    dataPickerChange (time) {
      if (this.paramsDft.timeType === '4') {
        this.paramsDft.start_day = time[0]
        this.paramsDft.end_day = time[1]
        this.screeningChange()
      }
    },

    /**
             * 获取省份
             * @returns {Promise<void>}
             * @private
             */
    async _getProvinceList () {
      let { data: res } = await this.$http.get(this.getApiUrl('dataanalysis/common/getProvinceList', false))
      if (res.code === 0) {
        this.provinceList = res.data
      }
    },
    _provinceChange (e) {
      if (e) {
        this._getCityListByProvince(e)
        this._initPage()
      }
    },
    /**
             * 获取市
             * @returns {Promise<void>}
             * @private
             */
    async _getCityListByProvince (city) {
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis/common/getCityListByProvince?province_name=${city}`, false))
      if (res.code === 0) {
        this.cityListByProvince = res.data
      }
    },
    /**
             * 获取sn8
             * @returns {Promise<void>}
             * @private
             */
    async _getSN8List () {
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis/common/getSN8List`, false))
      if (res.code === 0) {
        this.sN8List = res.data
      }
    },
    /**
       * 获取 最热统计
       * @returns {Promise<void>}
       * @private
       */
    async _getHotStatisticsCount () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.hotStatisticsCount = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis/content/getHotStatisticsCount`, false),
        { params: params })
      if (res.code === 0) {
        this.tableListDataMap.hotStatisticsCount = res.data
      }
      this.modeLoading.hotStatisticsCount = false
    },
    /**
       * 获取 关键词搜索统计
       * @returns {Promise<void>}
       * @private
       */
    async _getSearchKeyWordCount () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.searchKeyWordCount = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis/content/getSearchKeyWordCount`, false),
        { params: params })
      if (res.code === 0) {
        this.tableListDataMap.searchKeyWordCount = res.data
      }
      this.modeLoading.searchKeyWordCount = false
    },
    /**
       * 获取 菜谱收藏统计
       * @returns {Promise<void>}
       * @private
       */
    async _getFavoriteMenuCount () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.favoriteMenuCount = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis/content/getFavoriteMenuCount`, false),
        { params: params })
      if (res.code === 0) {
        this.tableListDataMap.favoriteMenuCount = res.data
      }
      this.modeLoading.favoriteMenuCount = false
    },
    /**
       * 获取 最热菜谱统计(菜谱浏览量)
       * @returns {Promise<void>}
       * @private
       */
    async _getHotMenuCount () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.hotMenuCount = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis/content/getHotMenuCount`, false),
        { params: params })
      if (res.code === 0) {
        this.tableListDataMap.hotMenuCount = res.data
      }
      this.modeLoading.hotMenuCount = false
    },
    /**
       * 获取 菜谱评分统计
       * @returns {Promise<void>}
       * @private
       */
    async _getMenuScoreCount () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.menuScoreCount = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis/content/getMenuScoreCount`, false),
        { params: params })
      if (res.code === 0) {
        this.tableListDataMap.menuScoreCount = res.data
      }
      this.modeLoading.menuScoreCount = false
    },
    /**
       * 获取 晒图菜谱统计
       * @returns {Promise<void>}
       * @private
       */
    async _getShowMenuCount () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.showMenuCount = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis/content/getShowMenuCount`, false),
        { params: params })
      if (res.code === 0) {
        this.tableListDataMap.showMenuCount = res.data
      }
      this.modeLoading.showMenuCount = false
    },
    /**
       * 获取 烹饪过菜谱统计
       * @returns {Promise<void>}
       * @private
       */
    async _getCookMenuCount () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.cookMenuCount = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis/content/getCookMenuCount`, false),
        { params: params })
      if (res.code === 0) {
        this.tableListDataMap.cookMenuCount = res.data
      }
      this.modeLoading.cookMenuCount = false
    },
    /**
       * 获取 使用过模式
       * @returns {Promise<void>}
       * @private
       */
    async _getUsedModeCount () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.usedModeCount = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis/content/getUsedModeCount`, false),
        { params: params })
      if (res.code === 0) {
        this.tableListDataMap.usedModeCount = res.data
      }
      this.modeLoading.usedModeCount = false
    },
    /**
       * 获取 分享菜单
       * @returns {Promise<void>}
       * @private
       */
    async _getShareMenuCountGET () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.getShareMenuCount = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis/content/getShareMenuCount`, false),
        { params: params })
      if (res.code === 0) {
        let list = []
        this._.each(res.data.menuShareList, (item) => {
          if (item.menu) {
            list.push(item)
          }
        })
        this.tableListDataMap.getShareMenuCount = list
      }
      this.modeLoading.getShareMenuCount = false
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .device-content {
        background-color: #ffffff;
        margin-top: 20px;
        padding: 20px;
        border-radius: 5px;
        .title {
            .span-1 {
                font-size: 18px;
                color: #001737;
            }
            .span-2, .span-3 {
                font-size: 14px;
                color: #001737;
                margin-left: 10px;
            }
        }
    }
    .device-data_row {
        & ~ .device-data_row {
            margin-top: $gap-big;
        }
        .box-card {
            & + .box-card {
                margin-top: 0;
                margin-left: $gap-default;
            }
            .title {
                font-weight: bolder;
                font-size: 145%;
            }
        }
    }
    .device-data_row--filter {
        .filter-item {
            ::v-deep .el-input {
                @include el-input__grey;
            }
            &.el-date-editor {
                ::v-deep {
                    @include el-date-editor__grey;
                }
            }
            &:not(.el-date-editor) {
                width: 8em;
            }
            & ~ .filter-item {
                margin-left: $gap-default;
            }
        }
        .el-checkbox, .el-radio {
            margin-right: 0;
            @include el-date-editor__grey
        }
    }
    .device-data_row--survey {
        .box-card {
            .radio_data-range {
                ::v-deep .el-radio-button {
                    & ~ .el-radio-button {
                        margin-left: $gap-default;
                    }
                    .el-radio-button__inner {
                        border: none;
                    }
                    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
                        color: $input-font-color;
                        background-color: $input-background-color;
                        box-shadow: none;
                    }
                }
            }
            .card-content {
                .data-item {
                    flex: auto;
                    &:not(:last-of-type) {
                        padding-right: 30px;
                    }
                    & ~ .data-item {
                        padding-left: 30px;
                        border-left: 1px solid $--border-color-base;
                    }
                    .item-row {
                        & ~ .item-row {
                            margin-top: $gap-small;
                        }
                    }
                    .num {
                        font-size: 150%;
                        font-weight: bolder;
                        color: $--color-primary;
                    }
                    .label {
                        font-size: 95%;
                        color: $--color-info;
                    }
                    .trend {
                        font-weight: bold;
                        .range {
                            font-weight: normal;
                            color: $--color-primary-light-1;
                        }
                    }
                }
            }
        }
    }
    .device-data_row--stage-trend {
    }
    .device-data_row--ratio {
        .box-card {
            flex: 1 1 50%;
        }
    }
    .device-data_row--retention {
        .index-btn-group {
            ::v-deep {
                .label {
                    @include style__grey;
                }

                .el-date-editor {
                    @include el-date-editor__grey;
                }
            }
        }
    }
</style>
